@@include('../../templates/modules/components/DocumentationPageHeader.html')
<div class="docs-Styles-section" id="icons">
  <h2>Icons</h2>
  <p>Fabric uses a custom font for its iconography. This font contains glyphs that you can scale, color, and style in any way. You can even flip them for right-to-left localization. To use the icons, combine the base ms-Icon class with a modifier class for the specific icon.</p>
  <pre><code class="hljs">&#x3C;i class=&#x22;ms-Icon ms-Icon--Mail&#x22; aria-hidden=&#x22;true&#x22;&#x3E;&#x3C;/i&#x3E;</code></pre>
  <p>Note the <code>aria-hidden</code> attribute, which prevents screen readers from reading the icon. In cases where meaning is conveyed only through the icon, such as an icon-only navigation bar, be sure to apply an aria-label to the button for accessibility.</p>
  <div class="docs-IconList clearfix">
    <ul>
      {{#each icons}}
        {{> IconPageItem this }}
      {{/each}}
    </ul>
  </div>
</div>
@@include('../../templates/modules/components/DocumentationPageFooter.html')
